<template>
  <div>
    <mt-popup v-model="popupVisible"
              position="right"
              :modal="false"
              class="popup-view"
              style="z-index:3">
      <div class="scroll-view">
        <customHeader middleTitle="适用门店"
                      @leftCallBack="popupHide"
                      :jsBridgeBack="false" />
        <!-- <div class="notice"
             v-if="list&&list.length">
          <i class="zhk-order_fa"></i>{{showInfo[switchType].tip}}
        </div> -->
        <div class="page-body">
          <no-data msg="暂无数据"
                   v-if="list&&!list.length"></no-data>
          <div class="mint-checklist">
            <div class="mint-checklist-label checklist"
                 v-for="(item,index) in shopList"
                 :key="index">
              <div class="checklist-wrapper">
                <p class="mint-checkbox-label">
                  {{item.shopName||'--'}}
                </p>
              </div>
            </div>
          </div>
          <div v-show="noMore&&!loading&&shopList.length!==0" class="no-more">
            <span>已经全部加载完毕</span>
          </div>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import { Popup, Toast } from "mint-ui";
import customHeader from "../../components/header/header";
import noData from "../../components/noData/noData";

export default {
  components: {
    customHeader,
    noData
  },
  props: {
  },
  data() {
    return {
      popupVisible: false,
      shopList:[],
      loading: false,
      noMore: true,

    };
  },
  watch: {
    popupVisible(val) {
      if (val) {
      }
    }
  },
  methods: {
    popupShow(item) {
      this.shopList = item.shopModels;
      this.popupVisible = true;
    },
    popupHide() {
      this.popupVisible = false;
      this.$emit("handleCancel");
    },
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/_colors.scss";
@import "../../style/public";
.popup-view {
  width: 100%;
  height: 100%;
  background: $background;
  .page-body {
    @include remCalc(margin-bottom, 88);
  }
  .notice {
    color: #459DFF;
    background-color: rgba(230, 247, 255, 0.8);
    @include remCalc(font-size, 24);
    @include remCalc(padding, 20, 30);
    > i {
      color: $color-red;
      position: relative;
      @include remCalc(top, 3);
      @include remCalc(font-size, 28);
      @include remCalc(padding, 0, 10, 0, 0);
    }
  }
  .btn-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 0;
    @include thin-border(true, true);
    > div {
      flex: 1;
      @include remCalc(font-size, 36);
      @include remCalc(height, 88);
      @include remCalc(line-height, 88);
      text-align: center;
      background: $color-red;
      color: #fff;
      &::before {
        border-color: $color-red;
      }
      &::after {
        border-color: $color-red;
      }
    }
  }
  .mint-checklist{
    @include remCalc(margin-top, 20);
     @include remCalc(padding-left,30);
     background-color: #fff;
  }
  .mint-checklist-title {
    @include remCalc(font-size, 24);
    @include remCalc(padding, 0, 10);
  }
  .checklist {
    display: flex;
    position: relative;
    color: #333;

    justify-content: center;
    align-content: center;
    @include remCalc(font-size, 28);
    @include remCalc(padding, 15, 30,15,0 );
    > * {
      pointer-events: none;
    }
    &:nth-of-type(n + 2) {
      @include thin-border(false, false, top);
    }
    .mint-checkbox {
      display: flex;
      justify-content: center;
      align-content: center;
      .mint-checkbox-core {
        top: 50%;
        transform: translate(0, -50%);
      }
    }
    .checklist-wrapper {
      flex: 1;
      margin-left: 5px;
      .mint-checkbox-label:nth-of-type(1) {
        @include remCalc(margin-bottom, 5);
      }
    }
  }
  .gray {
    color: #999;
    @include remCalc(font-size, 24);
  }
  .red {
    color: #ff3300;
  }
  .blue{
    color: #459DFF;
  }
}
</style>
<style>
.mint-indicator-wrapper {
  z-index: 9999;
}
</style>
